<template>
  <div class="root">
    <!-- AI -->
    <div class="aidoc" @click="GoAI">
        <img src="../../assets/images/AI_logo.png" width="100px" height="100px">
        <p  class="hover_ai">AI医生</p>
        <p style="font-size: 28px;">意见仅供参考</p>
    </div>
    <!-- 在线咨询 -->
    <div class="doc" @click="vis_list=true">
        <img src="../../assets/images/doc_logo.png" width="100px" height="100px"
        style="margin-left: 20px;">
        <p class="hover_doc" @click="vis_list=true,keyword=''">知名医生</p>
        <span style="font-size: 28px;margin-top: -10px;text-align: center;">由各医院知名医生给出医疗建议，如重大疾病建议到线下就诊</span>
    </div>
    <!-- 咨询记录 -->
    <div class="doc" @click="$router.push('/consultation')">
      <svg t="1739116592423" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5622" id="mx_n_1739116592424"
        width="64" height="64"><path d="M576 904.533333c-17.066667 0-29.866667-12.8-34.133333-25.6-4.266667-17.066667 8.533333-34.133333 25.6-38.4 174.933333-29.866667 302.933333-179.2 302.933333-354.133333 0-200.533333-162.133333-362.666667-362.666667-362.666667s-362.666667 162.133333-362.666666 362.666667c0 85.333333 29.866667 166.4 85.333333 230.4 12.8 12.8 8.533333 34.133333-4.266667 46.933333-12.8 12.8-34.133333 8.533333-46.933333-4.266666C119.466667 678.4 85.333333 584.533333 85.333333 482.133333c0-234.666667 192-426.666667 426.666667-426.666666s426.666667 192 426.666667 426.666666c0 209.066667-149.333333 388.266667-358.4 422.4h-4.266667z" fill="#1296db" p-id="5623"></path><path d="M315.733333 482.133333m-51.2 0a51.2 51.2 0 1 0 102.4 0 51.2 51.2 0 1 0-102.4 0Z" fill="#1296db" p-id="5624"></path><path d="M512 482.133333m-51.2 0a51.2 51.2 0 1 0 102.4 0 51.2 51.2 0 1 0-102.4 0Z" fill="#1296db" p-id="5625"></path><path d="M708.266667 482.133333m-51.2 0a51.2 51.2 0 1 0 102.4 0 51.2 51.2 0 1 0-102.4 0Z" fill="#1296db" p-id="5626"></path><path d="M503.466667 960c-46.933333 0-81.066667-38.4-81.066667-81.066667 0-46.933333 38.4-81.066667 81.066667-81.066666s81.066667 38.4 81.066666 81.066666c4.266667 42.666667-34.133333 81.066667-81.066666 81.066667z m0-115.2c-17.066667 0-29.866667 12.8-29.866667 29.866667s12.8 29.866667 29.866667 29.866666c17.066667 0 29.866667-12.8 29.866666-29.866666s-8.533333-29.866667-29.866666-29.866667z" fill="#1296db" p-id="5627"></path></svg>
      <p class="hover_doc" @click="$router.push('/consultation')">咨询记录</p>
      <span style="font-size: 28px;margin-top: 25px;text-align: center;">查询您的在线咨询记录</span>
    </div>
  </div>
  <router-view></router-view>
  <!-- 病情描述 -->
  <el-dialog
    v-model="vis_list"
    title="病情描述"
    width=30%>
    <el-input placeholder="请输入病情描述,为您推荐医生" v-model="keyword"
    style="font-size: 18px;min-height: 100px;" type="textarea"></el-input>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="vis_list = false">取消</el-button>
        <el-button type="primary" @click="vis_list=false,$router.push({path:'/showdoc',query:{keyword}})">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { useRouter } from 'vue-router';
import {ref,onMounted} from 'vue'

const $router=useRouter()

// onMounted(()=>{
//   console.log(localStorage.getItem('TOKEN'))
// })

// 跳转ai问答
const GoAI=()=>{
  $router.push({
    path:'/chat'
  })
}

// 病情描述弹窗
let vis_list=ref(false)
// 用户病情描述
let keyword=ref('')

</script>

<style lang="scss" scoped>
.root{
  min-width: 1800px;
  background-image: url('../../assets/images/ai.png');
  background-size: cover;
  background-repeat: no-repeat;
  height: 1080px;
  display: flex;
  justify-content: center;
  // align-items: center;
  padding-top: 300px;
  .aidoc{
    width: 300px;
    height: 300px;
    background-color: #fff;
    margin-left: 30px;
    display: flex;
    align-items: center;
    // justify-content: center;
    flex-direction: column;
    box-shadow: 0px -5px 10px 0px #768e99, 
			-6px 0px 6px 0px #768e99, 
			6px 0px 6px 0px #768e99, 
			0px 5px 19px 0px #768e99;
      border :solid 5px #0984e3;
      .hover_ai{
        font-size: 28px;
        color: #0984e3;
        font-weight: bold;
      }
      .hover_ai:hover{
        color: #bbb;
        cursor: pointer;
      }
  }
  .aidoc:hover{
    cursor: pointer;
    transform: scale(1.2);
    transition: 0.6s ease-in-out;
  }
  .aidoc:not(:hover){
    transition: transform 0.6s ease-in-out;
  }
  .doc{
    width: 300px;
    height: 300px;
    background-color: #fff;
    margin-left: 360px;
    display: flex;
    align-items: center;
    // justify-content: center;
    flex-direction: column;
    box-shadow: 0px -5px 10px 0px #768e99, 
			-6px 0px 6px 0px #768e99, 
			6px 0px 6px 0px #768e99, 
			0px 5px 19px 0px #768e99;
    border :solid 5px #0984e3;
    .icon{
      margin-top: 30px;
    }
    .hover_doc{
      font-size: 28px;
      color: #0984e3;
      font-weight: bold;
    }
    .hover_doc:hover{
      color: #bbb;
      cursor: pointer;
    }
  }
  .doc:hover{
    cursor: pointer;
    transform: scale(1.2);
    transition: 0.6s ease-in-out;
  }
  .doc:not(:hover){
    transition: transform 0.6s ease-in-out;
  }
}
</style>
